<template>
  <div class="paper-upload-container">
    <div class="paper-upload-form-item">
      <div class="paper-upload-form-item-label">标题</div>
      <el-input v-model="paperForm.title" type="text" size="small" class="paper-upload-form-item-input"/>
    </div>
    <div class="paper-upload-form-item">
      <div class="paper-upload-form-item-label">领域</div>
      <el-input v-model="paperForm.domain" type="text" size="small" class="paper-upload-form-item-input"/>
    </div>
    <div class="paper-upload-form-item">
      <div class="paper-upload-form-item-label">作者</div>
      <el-input v-model="paperForm.author" type="text" size="small" class="paper-upload-form-item-input"/>
    </div>
    <div class="paper-upload-form-item">
      <div class="paper-upload-form-item-label">所属比赛</div>
      <el-input v-model="paperForm.competitionName" type="text" size="small" class="paper-upload-form-item-input"/>
    </div>
    <div class="paper-upload-form-item">
      <div class="paper-upload-form-item-label">比赛年份</div>
      <el-input v-model="paperForm.year" type="text" size="small" class="paper-upload-form-item-input"/>
    </div>
    <div class="paper-upload-form-item">
      <div class="paper-upload-form-item-label">题号索引</div>
      <el-input v-model="paperForm.type" type="text" size="small" class="paper-upload-form-item-input"/>
    </div>
    <div class="paper-upload-form-item">
      <div class="paper-upload-form-item-label">算法标签</div>
      <el-input
        @keydown.enter.native="addLabel"
        v-model="labelInput"
        placeholder="按回车确认添加"
        :style="{width: '120px'}"
        type="text"
        size="small"
        class="paper-upload-form-item-input"
      />
      <div class="paper-upload-form-item-pl">
        <el-tag
          v-for="(item,index) in labelList"
          :key="item"
          effect="plain"
          closable
          :style="{height: '26px', lineHeight: '26px', marginLeft: '5px', marginBottom: '3px'}"
          @close="deleteLabel(index)"
        >
          {{item}}
        </el-tag>
      </div>
    </div>
    <div class="paper-upload-form-item">
      <div class="paper-upload-form-item-label">附件资源</div>
      <el-upload
        ref="upload"
        multiple
        action=""
        :auto-upload="false"
        :http-request="serverUpload"
        :show-file-list="false"
        :file-list="fileList"
        :on-change="handleChange"
      >
        <i class="iconfont icon-cloudupload upload-icon" slot="trigger"/>
<!--        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>-->
      </el-upload>
      <div class="paper-upload-form-item-pl">
        <div
          class="paper-upload-form-item-file"
          v-for="(item,index) in fileList"
          :key="index"
        >
          {{item.name}}
          <i :style="{cursor: 'pointer'}" @click="deleteFile(index)" class="iconfont icon-delete"/>
        </div>
      </div>
    </div>
    <div class="paper-upload-form-item" @click="pushPaper">
      <el-button size="small" type="primary">确认提交</el-button>
    </div>
  </div>
</template>

<script>

import {getFileOssConfig, uploadFile} from "../../api";
import axios from 'axios'
import {pushPaper, pushPaperBaseInfo, pushPaperPLInfo} from "../../api/paper";

export default {
  name: "upload",
  data() {
    return {
      name: 'upload',
      labelInput: '',
      paperForm: {
        title: '',
        domain: '',
        author: '',
        competitionName: '',
        year: '',
        type: ''
      },
      ossConfig: {},
      fileList:[],
      labelList: [],
      pid: '1'
    }
  },
  methods: {
    pushPaper() {
      pushPaperBaseInfo(this.paperForm).then(res => {
        let formData = new FormData();
        let fileList = [];
        for(let i=0; i<this.fileList.length; ++i) {
          let filename = this.fileList[i].name
          let filepath = this.ossConfig.dir + `${res.data}/` + this.fileList[i].name
          fileList.push({filename, filepath})
        }
        formData.append('pid', res.data);
        formData.append('fileListStr', JSON.stringify(fileList));
        formData.append('labelList', this.labelList)
        this.submitUpload();
        pushPaperPLInfo(formData).then(res => {
          console.log(res)
          this.labelList = [];
          this.paperForm.title = '';
          this.paperForm.domain = '';
          this.paperForm.author = '';
          this.paperForm.competitionName = '';
          this.paperForm.year = '';
          this.paperForm.type = '';
          this.$message.success("创建成功")
        });
      })
    },
    handleChange(file, fileList) {
      console.log(file);
      console.log(fileList);
      this.fileList = fileList
    },
    deleteFile(index) {
      this.fileList.splice(index, 1)
    },
    addLabel(){
      if(this.labelInput) {
        this.labelList.push(this.labelInput);
        this.labelInput = ''
      } else {
        this.$message.error("输入不能为空")
      }
    },
    deleteLabel(index) {
      console.log(index);
      this.labelList.splice(index, 1)
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    serverUpload({file}) {
      const formData = new FormData();
      //参数顺序有关 file必须放在最后
      formData.append("key", this.ossConfig.dir + `${this.pid}/` + file.name)
      for(let key in this.ossConfig) {
        formData.append(key, this.ossConfig[key])
      }
      formData.append("file", file);

      axios.post(this.ossConfig.host, formData).then(res => {
        console.log("success");
        let index = 0
        for(index=0; index<this.fileList.length; ++index) {
          if(this.fileList[index].name == file.name) {
            break;
          }
        }
        this.fileList.splice(index, 1)
      })
    }
  },
  mounted() {
    getFileOssConfig().then(res => {
      this.ossConfig = res.data;
    })
  }
}
</script>

<style lang="scss" scoped>
  .upload-icon {
    font-size: 24px;
    position: relative;
    top: 1px;
  }
  .paper-upload {
    &-container {
      min-height: 90vh;
      margin: 15px;
      padding: 25px;
      background-color: white;
      border-radius: 5px;
    }
    &-form-item {
      display: flex;
      align-items: center;
      font-size: 18px;
      margin-bottom: 30px;
      &-label {
        width: 95px;
      }
      &-input {
        font-size: 14px;
        width: 200px;
      }
      &-pl {
        display: flex;
        max-width: 800px;
        flex-wrap: wrap;
        align-items: center;
      }
      &-file {
        position: relative;
        top: 2px;
        margin-right: 10px;
        margin-left: 10px;
        margin-bottom: 3px;
      }
    }
  }
</style>
